<template>
  <div class="panel list-group-item" :key="element.key" :class="getClasses()">
    <div class="panel-heading">
      <h3
        class="panel-title"
        :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
        @click="element.fixed = !element.fixed"
        aria-hidden="true"
      >
        {{ element.name }}
      </h3>
    </div>
    <div class="panel-body">
      <el-tag :type="this.getPriType">优先级：{{ element.priority }}</el-tag>
    </div>
    <div class="panel-footer">
      <el-button-group>
        <el-button
          @click="btnClick(element)"
          type="primary"
          style="margin-left: 16px;"
        >
          查看详情
        </el-button>
        <el-button
          @click="open(element)"
          type="danger"
          style="margin-left: 16px;"
        >
          移除任务
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    list: Array,
    element: Object,
    color: String
  },
  data() {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {
    // 优先级计算
    getPriType() {
      switch (this.element.order) {
        case -1:
          return "info";
        case 0:
          return "danger";
        case 1:
          return "warning";
        case 2:
          return "success";
        default:
          return "success";
      }
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取Classes
    getClasses() {
      return [this.color];
    },
    // 查看详情
    btnClick(element) {
      this.$emit("showDetail", element);
    },
    // 移除任务
    deleteClick(element) {
      this.$emit("deleteTask", element);
    },
    // 移除任务弹窗提示
    open(element) {
      this.$confirm("是否删除该任务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteClick(element);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.list-group {
  min-height: 50px;
}

.list-group-item {
  cursor: move;
}

.list-group-item i {
  cursor: pointer;
}
</style>
